<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>我的消息</title>
    <script type="text/javascript">
		var basePath = '${basePath}';
	</script>
    <meta id="viewport" name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link href="<c:url value='/resource/css/main.css' />" type="text/css" rel="stylesheet">
    <link href="<c:url value='/resource/css/iconfont.css' />" type="text/css" rel="stylesheet">
</head>

<body>
<div class="container" id="share-container">
    <header class="module-topbar">
        <a class="fl" href="javascript:history.back();"><i class="iconfont">&#xe608;</i><spring:message code="back"/></a>
        <span><spring:message code="myMessage"/></span>
    </header>
    <div class="module-shares margin-topbar padding-container">
    </div>
</div>

<script type="text/javascript" src="${basePath}/resource/js/common/messages_${sessionScope.lang}.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/laytpl.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/layer/layer.m.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/swipeSlide.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/json2.js"></script>
<script type="text/javascript" src="${basePath}/resource/js/share/share.js"></script>
<script id="tpl" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ var message = d[i];}}
    <div class="share message line-around" id="{{ message.share.id }}">
        <header class="layout-box" msgId="{{ message.msgId }}" type="{{message.type}}">
            <a href="<c:url value='/u/{{message.from.id}}.do' />" class="mod-avatar" uid="{{ message.from.id }}">
                <div class="avatar"><img src="{{ message.from.avatar }}" onerror="$(this).attr('src','http://123.57.249.184/i/defaultAvatar/moren_icon.png')"></div>
            </a>

            <div class="box-col mod-info">
                <a href="<c:url value='/u/{{message.from.id}}.do' />">{{ message.from.name }}</a>
                {{# if (message.type == '1') { }} <spring:message code="repostThis"/>
                {{# } else if (message.type == '2') { }} <spring:message code="likeThis"/>
                {{# } else if (message.type == '4') { }} @<spring:message code="me"/>
                {{# } }}
				{{# var create_time;}}
    	{{# var strs= new Array();}}
   		{{# strs = message.created_at.split(',');}}
   		{{# if(strs.length > 1){ }}
    	{{# if(strs[2] == '1'){ }}
    		{{# create_time = strs[0]+' ' + messages.secs;}} 
    	{{# }else if(strs[2] == '2'){ }}
    		{{# create_time = strs[0] +' '+ messages.sec;}} 
    	{{# }else if(strs[2] == '3'){ }}
    		{{# create_time = strs[0] +' '+ messages.mins;}}
    	{{# }else if(strs[2] == '4'){ }}
    		{{# create_time = strs[0] +' '+ messages.min;}}
    	{{# }else if(strs[2] == '5'){ }}
    		{{# create_time = messages.today+strs[0];}}
    	{{# }else if(strs[2] == '6'){ }}
    		{{# create_time = messages.yesterday + strs[0];}}
   		{{# } }}
    	{{# }else{ }}
    		{{# create_time = message.created_at;}}
    	{{# } }}
                <div class="time">{{ create_time }}</div>
            </div>
            {{# if (message.type != '4') { }}
            <a class="operate-box reply"><i class="iconfont selected">&#xe601;</i><spring:message code="reply"/></a>
            {{# } }}
        </header>
        <section class="refer" id="{{message.share.id}}">
            <p class="default-content txt-xl">{{ message.text }}</p>

            <div class="layout-box extend-content">
                {{# if (message.share.pics && message.share.pics.length > 0) { }}
                <div class="media-pic">
                    <img width="80" height="80" src="{{message.share.pics[0]}}" class="loaded">
                </div>
                {{# } }}
                <div class="original">
                    {{# if (message.share.id != '-1') { }}
                    <p><a href="<c:url value='/u/{{message.share.user.id}}.do' />">{{message.share.user.name}}</a></p>
                    {{# } }}
                    <p>{{message.share.text}}</p>
                </div>
            </div>
        </section>
        <section class="interact-detail">
            {{# if (message.replies && message.replies.length > 0) { }}
            {{# for(var j = message.replies.length - 1; j >= 0; j--){var reply = message.replies[j], from =
            reply.from; }}
            <p class="txt-l{{# if (from.id != Page.getUser().id) { }} reply{{# }}}" msgId="{{reply.msgId}}">
                <a uid="{{from.id}}" href="<c:url value='/u/{{from.id}}.do' />">{{from.name}}</a><spring:message code="reply"/><a
                    uid="{{reply.to.id}}" href="">{{reply.to.name}}</a>:
                {{reply.text}}
                {{# if (from.id != Page.getUser().id) { }}
                <i class="iconfont">&#xe601;</i>
                {{# }}}
            </p>
            {{# }}}
            {{# }}}
        </section>
    </div>
    {{# } }}
</script>
<script>
    var feed;
    var offset, timestamp, next;
    var isMore = true;
    $(function () {
    	feed = Feed.create($('.module-shares'), Share.create($('.module-publisher')));
    	var userToken = localStorage.getItem("userTonken");
    	var lang = localStorage.getItem("lang");
        Page.ajaxGetQuiet('/message/0.do?userToken='+userToken+'&lang='+lang, null, function (response) {
            var messages = response.data.messages;
            timestamp = response.data.timestamp;
            offset = response.data.offset;
            next = response.data.next;
            loadShares(messages);
        });

         /* Page.onMore(function () {
            if (next) {
                Page.ajaxGetQuiet('/message/' + offset+'.do?userToken='+userToken+'&lang='+lang, {timestamp: timestamp}, function (response) {
                    console.log(response)
                    timestamp = response.data.timestamp;
                    offset = response.data.offset;
                    next = response.data.next;
                    laytpl(document.getElementById('tpl').innerHTML).render(response.data.messages, function (html) {
                        shares.appendTo($('.module-shares'));
                        $(shares).each(function() {
                            feed.bindShare($(this));
                        });
                    });
                });
            }
        }); */
    });
    
    Page.onMore(function () {
   		if(isMore){
	        if (next) {
	        	var userToken = localStorage.getItem("userTonken");
	        	var lang = localStorage.getItem("lang");
	        	isMore = false;
	            Page.ajaxGetQuiet('/message/' + offset+'.do?userToken='+userToken+'&lang='+lang, {timestamp: timestamp}, function (response) {
	                // console.log(response)
	                timestamp = response.data.timestamp;
	                offset = response.data.offset;
	                next = response.data.next;
	                // 加载分享
	                loadShares(response.data.messages);
	            });
	        }
   		}
    });
    
    function loadShares(feeds, clear) {
        laytpl(document.getElementById('tpl').innerHTML).render(feeds, function (html) {
            var shares = $(html);
            shares.find('img.loading').lazyload({
                threshold : 200,
                effect: "fadeIn"
            });

            if (clear) {
                $('.module-shares').empty();
            }
            shares.appendTo($('.module-shares'));
            $(shares).each(function() {
                feed.bindShare($(this));
            });
            isMore = true;
        });
    }
    
</script>

<jsp:include page="comment.jsp"/>
<jsp:include page="swipe.jsp"/>
</body>

</html>
